<template>
  <div class="home">
    <el-container>
      <el-header class="home-header" height="50px">
        <HomeHeader/>
      </el-header>
      <el-main class="home-main">
        <!-- 跑马灯 -->
        <div class="block text-center" m="t-4" style="margin: 0px">
          <el-carousel trigger="click" motion-blur="true" height="300px">
            <el-carousel-item v-for="(item, index) in images" :key="index">
              <img :src="item" alt="carousel image" class="carousel-image" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="car-rent">
          <div>
            <h1>租车服务</h1>
          </div>
          <div class="car-list">
            <div class="car-list-item" v-for="carItem in carData" :key="carItem.id">
              <router-link :to="'/carInfo/'+carItem.id" style="text-decoration: none;color: inherit;">
                <div class="item-title">
                  <div>{{ carItem.carName }}</div>
                  <div style="color: #ff5c5c;font-weight: 700">{{ carItem.rentPrice }}元/天</div>
                </div>
                <img style="width: 200px;height: 168px;" :src="getImage(carItem.img)" />
                <div class="item-desc">
                  {{ carItem.description }}
                </div>
              </router-link>
            </div>
          </div>
          <el-pagination style="display: flex; justify-content:center" v-model:current-page="searchForm.currentPage"
            v-model:page-size="searchForm.pageSize" :small="false" :disabled="false"
            :background="false" layout="prev, pager, next"
            :total="counts" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
        </div>
      </el-main>
    </el-container>
  </div>
</template>


<script lang="ts" setup>
import HomeHeader from '@/components/HomeHeader.vue';
import { ref, reactive, onMounted} from 'vue';
import { getCarPage } from '@/api';
import { ElMessage } from 'element-plus';
const images: any = ref([]);
const requireContext = require.context('@/assets/image/web-carousel', false, /\.(png|jpe?g|svg)$/);
requireContext.keys().forEach((fileName: any) => {
  images.value.push(requireContext(fileName));
});

// 列表数据
let carData = ref<carItem[]>([])

const baseURL = ref('http://localhost:8081/common')
//获取图片
const getImage = (img: any) => {
  return baseURL.value + `/download?name=${img}`
}

interface carItem {
  id: string;
  img: string,
  carName: string;
  rentPrice: number;
  description: string;
}
//总页数
let counts = ref(1)

let searchForm = reactive({
  carName: '',
  color: '',
  carType: '',
  currentPage: 1,
  pageSize: 8,
  state: 0
});


const init = () => {
  // 发送分页查询请求
  getCarPage(searchForm).then((res: { data: any }) => {
    let resData = res.data.data
    if (res.data.code == 50041) {
      // 更新列表
      carData.value = resData.records
      console.log(carData);
      // 更新总页数
      counts.value = resData.total
    } else {
      ElMessage({
        message: res.data.message,
        type: 'error'
      });
    }
  })
}

onMounted(() => {
    init();
});

// 监听页大小改变
const handleSizeChange = (val: number) => {
    searchForm.pageSize = val;
    init();
};

// 监听当前页改变
const handleCurrentChange = (val: number) => {
    searchForm.currentPage = val;
    init();
};

</script>

<style>
body {
  background-color: #eee;
  margin: 0;
  padding: 0;
}
.home-header {
  background-color: #fff;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.home-main {
  margin-top: 45px;
  height: calc(100vh - 45px);
  padding: 0 !important;
  overflow-y: auto;
  background: url('~@/assets/image/page-home-left-bg.74e87907.jpg') repeat-y 0 300px / 632px 2380px,
              url('~@/assets/image/page-home-right-bg.9461dbb0.jpg') repeat-y 100% 300px / 630px 2379px #f6f9fa;
}

.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.car-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.car-list-item {
  position: relative;
  width: 20%;
  height: 228px;
  background-color: #fff;
  border-radius: 10px;
  margin: 12px;
  padding: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.item-title {
  font-size: 20px;
  display: flex;
  justify-content: space-between;
}

.item-desc{
  font-size: 13px;
}
</style>
